<template>
    <div class="selector">
        <input type="text" class="form-control p-r-30" data-togger="dropdown" @input="searchValue" ref="input"
               @keydown.up.prevent="selectorUp" @keydown.down.prevent="selectorDown" @keyup.enter="enterSelect"
               :readonly="readonly" :disabled="disabled" :placeholder="placeholder" @click="openSelectMenu"/>
        <fold-icon class="pull-right fold-icon-fix" :open="thisStatus"/>
        <icon class="fa fa-remove fold-icon-fix pull-right cursor-pointer m-r-25" v-if="selectValue.label !== undefined"
              @click.native="clearValue"/>
        <drop-down :id="id" v-model="thisStatus" ref="dropdown">
            <ul-menu :data="subData" v-model="selectVal" :index="selectIndex" :selectValue="selectValue"/>
        </drop-down>
    </div>
</template>

<style scoped lang="scss">
    .selector {
        > input[readonly] {
            cursor: pointer;
        }
        > input[readonly]:focus {
            background-color: white;
        }
        > input[disabled] {
            cursor: no-drop !important;
            background-color: #bbb;
        }
    }
</style>

<script>
    /* eslint-disable no-undef */
    import DropDown from '../menu/DropDown.vue';
    import UlMenu from '../menu/Menu.vue';
    import FoldIcon from '../animation/FoldIcon.vue';
    import Icon from '../widget/Icon.vue';

    export default {
        name: 'selector-i',
        props: {
            data: {type: Array, default: () => { return []; }},
            search: {type: Function},
            disabled: {type: Boolean},
            default: {type: Object},
            placeholder: {type: String},
            value: {type: Object, default: () => { return []; }},
            id: { type: String, required: true }
        },
        data () {
            return {
                readonly: (this.search instanceof Function === false ? true : undefined),
                selectVal: {},
                thisStatus: false,
                subData: this.data,
                backDate: this.data,
                selectIndex: -1,
                selectValue: this.value
            };
        },
        components: {Icon, DropDown, UlMenu, FoldIcon},
        watch: {
            selectVal (newVal) {
                this.setValue(newVal);
            },
            data (newVal) {
                this.backDate = newVal;
                this.subdata = newVal;
            },
            subData () {
                this.selectIndex = -1;
            },
            selectValue (n) {
                this.$emit('input', n);
            },
            value (n) {
                this.selectValue = n;
            }
        },
        methods: {
            openDropDownMenu () {
                if (this.thisStatus === false) {
                    this.thisStatus = true;
                }
            },
            searchValue (e) {
                this.openDropDownMenu();
                let val = e.srcElement.value;
                if (this.search instanceof Function) {
                    this.search(val);
                }
                let back = [];
                if (val === '') {
                    this.selectIndex = -1;
                    this.subData = this.backDate;
                    return;
                }
                if (this.backDate && this.backDate.length) {
                    for (let key in this.backDate) {
                        let v = this.backDate[key];
                        if (v.label.toLowerCase().indexOf(val.toLowerCase()) >= 0) {
                            back.push(v);
                        }
                    }
                }
                this.subData = back;
                this.selectIndex = this.subData.indexOf(this.selectValue);
            },
            selectorUp () {
                this.openDropDownMenu();
                if (this.selectIndex === 0) {
                    return;
                }
                if (this.selectIndex === -1) {
                    this.selectIndex = 0;
                }
                this.selectIndex--;
            },
            selectorDown () {
                this.openDropDownMenu();
                if (this.selectIndex < this.subData.length - 1) {
                    this.selectIndex++;
                }
            },
            enterSelect () {
                if (this.selectIndex > -1 && this.selectIndex < this.subData.length) {
                    this.setValue(this.subData[this.selectIndex]);
                }
            },
            setValue (value) {
                this.thisStatus = false;
                setTimeout(() => {
                    this.subData = this.backDate;
                }, 500);
                this.selectValue = value;
                $(this.$refs.input).val(value.label);
            },
            clearValue () {
                this.setValue({});
                this.selectIndex = -1;
            },
            defaultValue () {
                if (!$.isEmptyObject(this.default)) {
                    let index = this;
                    if (index > -1 && index < this.subData.length) {
                        this.setValue(this.subData[index]);
                    }
                }
            },
            openSelectMenu () {
                this.thisStatus = !this.thisStatus;
            }
        },
        mounted () {
            this.defaultValue();
        }
    };
</script>
